<template>
  <ul class="ns-movieList">
    <!-- <li class="page-loadmore-listitem" v-for="item in hotfilmlist" :key="item.id">{{ item.name }}</li> -->
    <li class="movieItem ceshi" v-for="item in movieData" :key="item.id" >
      <div class="movieLeft">
        <img :src="item.img.replace('http:','https:').replace('/w.h/', '/128.0/')" alt="">
      </div>
      <div class="movieBody">
        <div class="header">
          <span class="header-title">{{item.name}}</span>
          <span class="tag" v-if="item.ver.indexOf('3D') != -1">3D</span>
          <span class="tag" v-if="item.ver.indexOf('3D') == -1 && item.ver.indexOf('2D') != -1">2D</span>
          <span class="tag" v-if="item.ver.indexOf('IMAX') != -1">IMAX</span>
        </div>
        <div class="descWrap">
          <div class="desc">
            <label for="">观众评分</label>
            <span class="score">{{item.sc}}</span>
          </div>
          <div class="desc">
            <label for="">导演：</label>
            <span>{{item.dir}}</span>
          </div>
          <div class="desc">
            <label for="">主演：</label>
            <span>{{item.star}}</span>
          </div>
        </div>
      </div>
      <div class="movieRight center">
        <div class="btn btn-red btn-radius" @click="goMovieDetail(item.id)" >购票</div>
      </div>
    </li>
  </ul>
</template>
<script>
  export default {
    props: ['movieData'],
    data() {
      return {

      }
    },
    filters: {
      film_ver: function (value) {
        let film_ver = '';
        if (value == undefined || value == '' || value == null) {
            return film_ver;
          } else {
              if (value.indexOf('3D') > -1) {
                  film_ver = '<span class="tag">3D</span>';
              } else if (value.indexOf('2D') > -1) {
                  film_ver = '<span class="tag">2D</span>';
              }
              if (value.indexOf('IMAX') > -1) {
                  film_ver += '<span class="tag">IMAX</span>';
              } else {
                  film_ver = '';
              }
          }
        return  film_ver;
      }
    },
    mounted() {

    },
    methods: {
      goMovieDetail:function(id){
        this.$router.push('/movieDetail')
      }
    }
  }

</script>
<style scoped>
    ul.ns-movieList{
        margin: 0;
        padding: 0;
    }
  .ns-movieList .movieItem {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 15px 16px;
  }

  .ns-movieList .movieItem .movieLeft {
    position: relative;
    margin-right: 12px;
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
    width: 20%;
    border-radius: 5px;
    overflow: hidden;
  }

  .ns-movieList .movieItem .movieLeft img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .ns-movieList .movieItem .movieLeft:after {
    display: block;
    content: '';
    padding-top: 142%;
    background: #f1f1f1;
  }

  .ns-movieList .movieItem .movieBody {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .ns-movieList .movieItem .movieBody .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 4px 0;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;
  }

  .ns-movieList .movieItem .movieBody .header span.header-title {
    margin-right: .5em;
    white-space: nowrap;
    overflow: hidden;
    max-width: 8em;
    text-overflow: ellipsis;
  }

  .ns-movieList .movieItem .movieBody .header .tag {
    background: #c2c2d2;
    border: 1px solid #c2c2d2;
    border-radius: 2px;
    padding: 0 3px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    height: 14px;
    line-height: 14px;
  }

  .ns-movieList .movieItem .movieBody .header .tag:last-child:not(:first-child) {
    border-radius: 0 2px 2px 0;
    background: #fff;
    color: #c2c2d2;
  }

  .ns-movieList .movieItem .movieBody .descWrap {
    margin-right: 65px;
  }

  .ns-movieList .movieItem .movieBody .desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.2;
    color: #888;
  }

  .ns-movieList .movieItem .movieBody .desc label {
    margin-right: .5em;
    font-size: inherit;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }

  .ns-movieList .movieItem .movieBody .desc .score {
    font-size: inherit;
    color: #ffca00;
  }

  .ns-movieList .movieItem .movieBody .desc span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.ns-movieList .movieItem .movieRight.center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    bottom: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: .0625rem solid transparent;
    padding: .375rem 1rem;
    font-size: .875rem;
    border-radius: .25rem;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.btn-red {
    color: #fff;
    background-image: -webkit-gradient(linear,left top,right top,from(#ff5277),to(#ff1631));
    background-image: linear-gradient(to right,#ff5277 0,#ff1631 100%);
    background-repeat: repeat-x;
    border-color: #ff5277;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.btn-radius {
    border-radius: 90px!important;
}
.btn-blue {
    color: #fff;
    background-image: -webkit-gradient(linear,left top,right top,from(#52c1ff),to(#16b0ff));
    background-image: linear-gradient(to right,#52c1ff 0,#16b0ff 100%);
    background-repeat: repeat-x;
    border-color: #52c1ff;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
</style>
